<template>
	<view class="order_closure_page">
		
		<view class="pt32 pb32 fs40 fwb cor_000">订单关闭</view>
		
		<view class="close_area_block_1">
			<view class="up_step_data">
				<view class="up_item_step" :class="item.checked ? 'active' : ''" v-for="(item, index) in stepdata" key="item.id">
					<view class="icon_step_cir"></view>
					<view class="mt10">{{item.name}}</view>
				</view>
			</view>
			
			<view class="pl30 pr30">
				<view class="mt32 fs28 fwb lh40">收货地址【复制】</view>
				
				<view class="mt20 fs28 lh40 cor_666">四维玩家  18561109735河南省烟台市莱山区迎春大街飞龙某某大厦</view>
			</view>
		</view>
		
		<view class="mt24 close_area_block_2">
			<view class="pt40 pb24 bb1 fs32 fwb cor_333">关闭原因</view>
			<view class="mt32 fs28 cor_999 lh40">计划有变，重新下单</view>
		</view>
		
		<view class="mt24 close_area_block_3">
			
			<view class="flex_box aic pt20 pb20">
				<view class="w94 fs28 cor_333">订单编号</view>
				<view class="item ov tar">
					<view class="df aic jcfe cor_999 fs24">
						<view class="mr10">12371278381241649184617372613</view>
						<up-copy content="12371278381241649184617372613">
							<view class="fs24">[复制]</view>
						</up-copy>
					</view>
				</view>
			</view>
			
			<view class="flex_box aic pt20 pb20">
				<view class="w94 fs28 cor_333">下单时间</view>
				<view class="item ov tar">
					<view class="fs24 cor_999">2025-05-14 15:43:24</view>
				</view>
			</view>
			
			<view class="flex_box aic pt20 pb20">
				<view class="w94 fs28 cor_333">更新时间</view>
				<view class="item ov tar">
					<view class="fs28 cor_333">联系客服</view>
				</view>
			</view>
			
		</view>
		
		<view class="mt24 close_area_block_2">
			<view class="pt40 pb24 bb1 fs32 fwb cor_333">商品信息</view>
			<view class="mt32 flex_box">
				<view class="re mr15"><image src="@/static/images/banner_01.png" class="pic_size"></image></view>
				<view class="item ov">
					<view class="df hp100 lh40 fldc jcsb">
						<view class="flex_box aic">
							<view class="item ov"><view class="fs28 fwb cor_333 clamp_2">塞尔达 荒野之息</view></view>
							<view class="fs24 cor_333">预估</view>
							<view class="ml10 fs32 cor_F52">¥ 238元</view>
						</view>
						<view class="flex_box aic fs24 cor_999">
							<view class="item ov"><view class="clamp_1">别店购买、原包装完好</view></view>
							<view class="">X1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	
	const stepdata = ref([
		{ id: 0, name: '1.下单', checked: false },
		{ id: 1, name: '2.寄快递', checked: false },
		{ id: 2, name: '3.质检验货', checked: false },
		{ id: 3, name: '4.确认报价', checked: false },
		{ id: 4, name: '5.支付', checked: false }
	])
	
</script>

<style lang="scss" scoped>
	
	.order_closure_page {
		position: relative;
		padding: 0 24rpx;
		min-height: 100vh;
		background-color: #f6f6f6;
		.close_area_block_1 {
			position: relative;
			padding: 40rpx 0;
			border-radius: 16rpx;
			background: linear-gradient(180deg, #FFEEEE 0%, #FFFFFF 70.99%);
		}
		.close_area_block_2 {
			position: relative;
			padding: 0 30rpx 40rpx;
			background: #fff;
			border-radius: 16rpx;
			.pic_size {
				position: relative;
				width: 200rpx;
				height: 124rpx;
				border-radius: 16rpx;
				vertical-align: middle;
			}
		}
		.close_area_block_3 {
			position: relative;
			padding: 12rpx 30rpx;
			line-height: 40rpx;
			background: #fff;
			border-radius: 16rpx;
		}
	}

</style>
